<template>
  <continer class="continer" :isNoTabs='true'>
    <template slot="search">
      <div class="header">
        <span @click="goBack">
          <icon-svg style="color: #C4CDD4;cursor: pointer" iconClass="mianfanhui"></icon-svg>
        </span>
        <span class="header-title">工程师移动端</span>
      </div>
    </template>
    <template slot="content">
      <div class="enginner-content">
        <div>
          工程师移动端URL
          <el-tooltip popper-class="tooltip-class"  placement="bottom">
            <div slot="content">适用于各种浏览器中自行打开工程师移动端页面</div>
            <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42" style="color:#B3B9C7; font-size:12px"></i>
          </el-tooltip>
        </div>
        <el-input v-model="enginnerUrl" disabled>
          <i slot="suffix" class="V7_iconfont V7_iconV7tubiao_fuzhi" @click="copyText(enginnerUrl)"></i>
        </el-input>
      </div>
      <div class="enginner-content">
        <div>
          工程师端-企业微信入口
          <el-tooltip popper-class="tooltip-class"  placement="bottom">
            <div slot="content">对接企业微信时，用于配置「应用主页」的跳转链接</div>
            <i class="V7_iconfont V7_iconV7tubiao_bangzhu-42" style="color:#B3B9C7; font-size:12px"></i>
          </el-tooltip>
        </div>
        <el-input v-model="engineerComWeChatUrl" disabled>
          <i slot="suffix" class="V7_iconfont V7_iconV7tubiao_fuzhi" @click="copyText(engineerComWeChatUrl)"></i>
        </el-input>
      </div>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import continer from '@/common/views/configCommon/ui-modules/handle-wrapper.vue'
import { commonAction } from '@/utils/common'
import Clipboard from 'clipboard-js'
@Component({
  name: 'EnginnerSetting',
  components: {
    continer
  }
})
export default class EnginnerSetting extends Vue {
  [x: string]: any
  private enginnerUrl: string = ''
  private engineerComWeChatUrl: string = ''
  public goBack () {
    this.$emit('show-main', 'enginnner')
  }

  private copyText (content: string) { // 复制
    Clipboard.copy(content).then(() => {
      this.$message.success('复制成功')
    }).catch(() => {
      this.$message.error('复制失败')
    })
  }

  private created () {
    commonAction({
      url: '/server-work/action/facade/list',
      method: 'post',
      data: {}
    }).then(res => {
      const enginnerProps = res.data.engineerVOList
      if (enginnerProps) {
        const enginnerProp = enginnerProps[0]
        this.enginnerUrl = enginnerProp.engineerUrl
        this.engineerComWeChatUrl = enginnerProp.engineerComWeChatUrl
      }
    })
  }
}
</script>
<style lang="stylus" scoped>
  .continer
    .enginner-content
      width: 300px
      margin 50px 0 0 50px
      font-size 12px
      font-family PingFang SC
      font-weight 600
      color #303753
      line-height 25px
  /deep/.handle-wrapper-header
    padding 0 !important
  /deep/.search-box
    width 100%
  .header
    position relative
    height 54px
    width 100%
    padding 0 24px
    .header-title
      margin-left 10px
      height 54px
      line-height 54px
      font-size 14px
      font-family PingFang SC
      font-weight 600
      color #303753
    .header-btn
      position absolute
      top 50%
      right 24px
      transform translate(0, -50%)
</style>
